<template>
    <div>
        <el-row class="title">
            角色管理
        </el-row>
        <el-button type="primary" style="margin-bottom: 20px;" @click="addFormVisible = true">添加</el-button>
        <el-table
                :data="this.$store.state.role"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    type="index"
                    label="序号"
                    width="200"/>
            <el-table-column
                    prop="role_id"
                    v-if="false"/>
            <el-table-column
                    prop="role_name"
                    label="名称"
                    width="500"/>
            <el-table-column
                    prop="role_num"
                    label="用户人数"
                    width="300"/>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="getUserByRole(scope.row.role_id)" type="text" size="small">查看用户</el-button>
                    <el-button @click="getPermissionsByRole(scope.row.role_id)" type="text" size="small">查看权限</el-button>
                    <el-button @click="updateClick(scope.row)" type="text" size="small" :disabled="scope.row.role_id<=2">修改</el-button>
                    <el-button @click="delClick(scope.row.role_id)" type="text" size="small" :disabled="scope.row.role_id<=2">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- Check User -->
        <el-dialog title="查看用户" :visible.sync="checkUserFormVisible">
            <el-table
                    :data="checkUserForm"
                    style="width: 80%;height :384px;margin-left: 10%;overflow: auto">
                <el-table-column
                        type="index"
                        label="序号"
                        width="180"/>
                <el-table-column
                        prop="user_account"
                        label="账号"
                        width="260">
                </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="姓名">
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- Check Permissions -->
        <el-dialog title="查看权限" :visible.sync="checkPermissionsFormVisible">
            <el-table
                    :data="checkPermissionsForm"
                    style="width: 80%;height :384px;margin-left: 10%;overflow: auto">
                <el-table-column
                        type="index"
                        label="序号"
                        width="180"/>
                <el-table-column
                        prop="permissions_name"
                        label="名称"
                        width="260">
                </el-table-column>
                <el-table-column
                        prop="permissions_router"
                        label="路由">
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- Add Form -->
        <el-dialog title="新建角色" :visible.sync="addFormVisible">
            <el-form :model="addForm">
                <el-form-item label="角色名称" label-width="15%">
                    <el-input v-model="addForm.name" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="选择权限" label-width="15%">
                    <el-checkbox-group v-model="addForm.selectedPermissions" style="height:300px;overflow: auto">
                        <el-form-item v-for="parent in this.$store.state.permissions"
                                      :label="parent.permissions_name">
                            <br/>
                            <el-checkbox v-for="child in parent.children"
                                         :label="String(parent.permissions_id)+'|'+String(child.permissions_id)"
                                         :key="child.permissions_id">
                                {{child.permissions_name}}
                            </el-checkbox>
                        </el-form-item>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="addRole" style="margin-right: 30px">确 定</el-button>
            </div>
        </el-dialog>

        <!-- Update Form -->
        <el-dialog title=" 修改角色" :visible.sync="updateFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="角色名称" label-width="15%">
                    <el-input v-model="updateForm.name" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="选择权限" label-width="15%">
                    <el-checkbox-group v-model="updateForm.selectedPermissions" style="height:300px;overflow: auto">
                        <el-form-item v-for="parent in this.$store.state.permissions"
                                      :label="parent.permissions_name">
                            <br/>
                            <el-checkbox v-for="child in parent.children"
                                         :label="String(parent.permissions_id)+'|'+String(child.permissions_id)"
                                         :key="child.permissions_id"
                                         :checked="selectedPermissions.includes(child.permissions_id)">
                                {{child.permissions_name}}
                            </el-checkbox>
                        </el-form-item>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelUpdate" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="updateRole" style="margin-right: 30px">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        inject: ['reload'],
        data() {
            return {
                checkUserFormVisible: false,
                checkPermissionsFormVisible: false,
                updateFormVisible: false,
                addFormVisible: false,
                checkUserForm: [],
                checkPermissionsForm: [],
                addForm: {
                    name: "",
                    selectedPermissions: []
                },
                updateForm: {
                    roleId:"",
                    name: "",
                    selectedPermissions: []
                },
                selectedPermissions:[]
            }
        },
        methods: {
            refresh() {
                this.reload()
            },
            getAllRole() {
                // 获取全部的角色
                this.$axios({
                    method: "get",
                    url: "/roleController/getAllRole"
                }).then(response => {
                    this.$store.commit("setAllRole", response.data);
                }).catch(error => {
                    console.log(error)
                })
            },
            getUserByRole(role_id) {
                //获取当前角色所拥有的用户
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/userController/getUserByRole",
                    params: {
                        role_id: role_id
                    }
                }).then(response => {
                    that.checkUserForm = response.data;
                    this.checkUserFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            getPermissionsByRole(role_id) {
                // 获取当前角色所拥有的权限
                let that = this;
                this.$axios({
                    method: "get",
                    url: "/permissionsController/getPermissionsByRole",
                    params: {
                        role_id: role_id
                    }
                }).then(response => {
                    that.checkPermissionsForm = response.data;
                    this.checkPermissionsFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            addRole() {
                this.addFormVisible = true;
                this.$axios({
                    method: "get",
                    url: "/roleController/addRole",
                    params: {
                        role_name: this.addForm.name,
                        permissions_list: JSON.stringify(this.addForm.selectedPermissions)
                    }
                }).then(() => {
                    this.addForm.name = '';
                    this.addForm.selectedPermissions = [];
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                }).catch(error => {
                    console.log(error)
                });
            },
            cancelAdd() {
                this.addFormVisible = false;
                this.addForm.name = '';
                this.addForm.selectedPermissions = [];
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                })
            },
            delRole(role_id) {
                this.$axios({
                    method: "get",
                    url: "/roleController/delRole",
                    params: {
                        role_id: role_id
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            delClick(role_id) {
                this.$confirm('将删除此角色且将对应账号还原成游客状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delRole(role_id);
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateRole() {
                this.$axios({
                    method: "get",
                    url: "/roleController/updateRole",
                    params: {
                        role_id:this.updateForm.roleId,
                        role_name: this.updateForm.name,
                        permissions_list: JSON.stringify(this.updateForm.selectedPermissions)
                    }
                }).then(() => {
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }).catch(error => {
                    console.log(error)
                })
            },
            cancelUpdate() {
                this.updateFormVisible = false;
                this.refresh();
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                })
            },
            updateClick(role) {
                this.updateForm.name = role.role_name;
                this.updateForm.roleId = role.role_id;
                this.$axios({
                    method:"get",
                    url:"/roleController/getPermissionsIdByRole",
                    params:{
                        role_id:this.updateForm.roleId
                    }
                }).then(response =>{
                    this.selectedPermissions = response.data;
                    this.updateFormVisible = true;
                }).catch(error =>{
                    console.log(error)
                })
            }
        },
        mounted() {
            this.getAllRole()
        }
    }
</script>

<style scoped>
    .title {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        color: #409EFF;
        font-size: 20px;
        font-weight: bold;
        height: 80px;
        line-height: 80px;
        padding-left: 20px;
        margin-bottom: 20px;
    }
</style>